<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="div1">
			你好,我是DIV
			<p>我是段落</p>
		</div>
		<div id="div2">你好,我是DIV</div>
		<div class="mydiv">你好,我是DIV111111111111</div>
		<input type="text" name="userName" value="123"/>
	</body>
	<script type="text/javascript">
		var div1 = document.getElementById("div1");
		var content = div1.innerHTML;
		console.log(content);
		div1.style.height = "100px";
		div1.style.width = "100px";
		div1.style.backgroundColor = "red";
		//通过标签获取
		var allDiv = document.getElementsByTagName("div");
		var div11 = allDiv[1];
		console.log(div11.innerHTML);
		//通过类名称获取
		var allMyDiv = document.getElementsByClassName("mydiv");
		var myDiv = allMyDiv[0];
		console.log(myDiv.innerHTML);
		//通过name获取
		var allUserName = document.getElementsByName("userName");
		console.log(allUserName)
		var userName = allUserName[0];
		console.log(userName.value);
		
		
		console.log("--------------------------");
		var div111 = document.querySelector("#div1");
		var allDiv = document.querySelectorAll("div");
		var firstDiv = document.querySelector("div");
		
		console.log("--------------------------");
		
		var userInput = document.querySelector("input[name='userName']");
		userInput.value = 250;
		
		//value--------单独用在表单元素
		//innerText----获取html的纯文本
		//innerHtml----获取所有html内容
		
		console.log("--------------------------")
		var thisDiv1 = document.querySelector("#div1");
		console.log(thisDiv1.innerText);
		console.log(thisDiv1.innerHTML);
			
	</script>
</html>
